import { useState } from 'react';
import { Steps, Layout } from 'antd';
import Credential from '../components/register/Credential.js';
import Email from '../components/register/Email.js';

const { Content } = Layout;
const { Step } = Steps;

const Register = () => {
  const [currentStep, setCurrentStep] = useState(0);

  return (
    <Layout>
      <Content>
        <StepBar currentStep={currentStep} setCurrentStep={setCurrentStep}></StepBar>
        <RenderForm currentStep={currentStep} setCurrentStep={setCurrentStep}></RenderForm>
      </Content>
    </Layout>
  );
};

const StepBar = ({ currentStep }) => {
  return (
    <Steps current={currentStep} style={{ width: '500px', margin: '0 auto' }} size='small'>
      <Step
        title='步骤 1'
        description='邮箱验证'
      />
      <Step
        title='步骤 2'
        description='用户名和密码'
      />
    </Steps>
  );
};

const RenderForm = ({ currentStep, setCurrentStep }) => {
  const [email, setEmail] = useState('');
  switch (currentStep) {
    case 0:
      return (<Email setEmail={setEmail} setCurrentStep={setCurrentStep}></Email>);
    case 1:
      return (<Credential email={email} setCurrentStep={setCurrentStep}></Credential>);
    default:
      return;
  }
};

export default Register;
